<template>
  <cl-page
    class="home-page"
    :back-top="true"
  >
    <view class="banner-section">
      <view class="banner-wrapper">
        <cl-banner
          :list="bannerImages"
          :height="640"
          :autoplay="3000"
          :pt="{ className: 'banner-no-radius' }"
        />
        <view class="banner-overlay">
          <view class="banner-overlay__header">
            <view class="banner-overlay__menu">
              <cl-icon
                name="menu-line"
                size="36"
                color="#fff"
              />
            </view>
            <view class="banner-overlay__category">
              <text class="banner-overlay__category-main">WEDDING</text>
              <text class="banner-overlay__category-sub">PHOTOGRAPHY</text>
            </view>
          </view>
        </view>
      </view>

      <view class="studio-intro">
        <text class="studio-intro__title">{{ studioProfile.name }}</text>
        <text class="studio-intro__subtitle">MERCHANT PROFILE</text>
        <text class="studio-intro__desc">{{ studioProfile.introduction }}</text>
      </view>
    </view>

    <view class="section section--featured">
      <view class="section__header">
        <text class="section__title">精选作品</text>
        <text
          class="section__more"
          @tap="goWorks"
        >查看全部</text>
      </view>
      <view
        v-if="featuredWorks.length"
        class="featured-list"
      >
        <view
          v-for="item in featuredWorks"
          :key="item.id"
          class="featured-item"
          @tap="openWork(item.id)"
        >
          <image
            class="featured-item__image"
            :src="item.coverUrl"
            mode="aspectFill"
          />
          <view class="featured-item__info">
            <text class="featured-item__title">{{ item.title }}</text>
            <text class="featured-item__subtitle">{{ item.subtitle }}</text>
          </view>
        </view>
      </view>
      <view
        v-else
        class="empty-tip"
      >精选作品准备中</view>
    </view>

    <view class="section section--team">
      <view class="section__header">
        <text class="section__title">摄影团队</text>
      </view>
      <view
        v-if="photographers.length"
        class="team-list"
      >
        <view
          v-for="member in photographers"
          :key="member.id"
          class="team-item"
        >
          <image
            class="team-item__avatar"
            :src="member.avatarUrl"
            mode="aspectFill"
          />
          <view class="team-item__info">
            <text class="team-item__name">{{ member.name }}</text>
            <text class="team-item__speciality">{{ member.speciality }}</text>
            <text class="team-item__experience">{{ member.experience }}</text>
          </view>
        </view>
      </view>
      <view
        v-else
        class="empty-tip"
      >团队成员准备中</view>
    </view>

    <view class="section section--location">
      <view class="section__header">
        <text class="section__title">工作室地址</text>
      </view>
      <view class="location-card">
        <image
          class="location-card__image"
          :src="studioProfile.mapImageUrl"
          mode="aspectFill"
        />
        <view class="location-card__info">
          <text class="location-card__name">{{ studioProfile.name }}</text>
          <text class="location-card__address">{{ studioProfile.address }}</text>
          <text class="location-card__hours">{{ studioProfile.openHours }}</text>
        </view>
      </view>
    </view>

    <cl-float-view
      :size="50"
      :bottom="200"
      :left="contactLeft"
      @tap="toggleContact"
    >
      <view class="contact-fab">
        <text class="contact-fab__text">联系</text>
      </view>
    </cl-float-view>

    <cl-popup
      v-model="contactVisible"
      title="联系工作室"
      direction="bottom"
      :show-close="false"
      :show-header="false"
      :pt="{ className: 'contact-popup-wrapper' }"
    >
      <view class="contact-popup">
        <view class="contact-popup__header">
          <text class="contact-popup__title">联系我们</text>
          <text class="contact-popup__subtitle">专业摄影团队为您服务</text>
        </view>

        <view class="contact-popup__content">
          <view
            v-for="item in contactEntries"
            :key="item.label"
            class="contact-item"
            @tap="handleContactTap(item)"
          >
            <view class="contact-item__icon">
              <cl-icon
                :name="item.icon"
                size="40"
                color="#4286f3"
              />
            </view>
            <view class="contact-item__info">
              <text class="contact-item__label">{{ item.label }}</text>
              <text class="contact-item__value">{{ item.value }}</text>
            </view>
            <view class="contact-item__action">
              <cl-icon
                name="arrow-right-s-line"
                size="32"
                color="#999"
              />
            </view>
          </view>
        </view>

        <view class="contact-popup__safe-area" />
      </view>
    </cl-popup>
  </cl-page>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { fetchStudioProfile, fetchWorks, fetchBanners } from "@/services/gallery";

const featuredWorks = ref([]);
const photographers = ref([]);
const contactVisible = ref(false);
const windowInfo = uni.getWindowInfo();
const contactLeft = Math.max(windowInfo.windowWidth - 71, 32);
const banners = ref([]);
const studioProfile = ref({
  name: "光影映像摄影工作室",
  phone: "18633585595",
  wechat: "CHINA-DAJUN",
  email: "1037265872@qq.com",
  address: "",
  openHours: "",
  introduction: "尚赫摄影邀请你和我们1一起守至爱的乐趣，并一直乐呵延续下去，我们顶此不贰！尚赫十年一一格走来，见证了不少完美情侣的甜蜜瞬间",
  mapImageUrl: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=40"
});

const bannerImages = computed(() => {
  // 优先使用后端返回的轮播图
  if (banners.value.length) {
    return banners.value.map(item => item.imageUrl);
  }
  // 其次使用精选作品封面（至少取前3个）
  if (featuredWorks.value.length) {
    return featuredWorks.value.map(item => item.coverUrl).slice(0, 3);
  }
  // 如果都没有，返回空数组
  return [];
});

const contactEntries = computed(() => [
  {
    label: "电话咨询",
    value: studioProfile.value.phone || "暂无",
    icon: "phone-line",
    type: "phone"
  },
  {
    label: "微信联系",
    value: studioProfile.value.wechat || "暂无",
    icon: "wechat-line",
    type: "wechat"
  },
  {
    label: "邮箱咨询",
    value: studioProfile.value.email || "暂无",
    icon: "mail-line",
    type: "email"
  }
]);

onLoad(async() => {
  try {
    const [bannerList, worksData, studio] = await Promise.all([
      fetchBanners({ position: 10 }), // 10=首页, 20=作品集
      fetchWorks(),
      fetchStudioProfile()
    ]);
    banners.value = bannerList || [];
    // worksData 返回结构：{ list: [], total: number }
    const worksList = worksData?.list || [];
    featuredWorks.value = worksList.filter(item => item.featured).slice(0, 6);
    studioProfile.value = {
      ...studioProfile.value,
      ...studio
    };
    photographers.value = studio.photographers || [];
  } catch (error) {
    uni.showToast({
      title: error.message || "数据加载失败",
      icon: "none"
    });
  }
});

function goWorks() {
  uni.switchTab({ url: "/pages/tabbars/mine" });
}

function openWork(workId) {
  uni.navigateTo({ url: `/pages/works/detail?id=${workId}` });
}

function toggleContact() {
  contactVisible.value = !contactVisible.value;
}

function handleContactTap(item) {
  if (item.value === "暂无") {
    uni.showToast({ title: "暂无联系方式", icon: "none" });
    return;
  }

  switch (item.type) {
    case "phone":
      uni.makePhoneCall({ phoneNumber: item.value });
      break;
    case "wechat":
      uni.setClipboardData({
        data: item.value,
        success: () => {
          uni.showToast({ title: "微信号已复制", icon: "success" });
        }
      });
      break;
    case "email":
      uni.setClipboardData({
        data: item.value,
        success: () => {
          uni.showToast({ title: "邮箱已复制", icon: "success" });
        }
      });
      break;
  }
}
</script>

<style  lang="scss">
.home-page {
  position: relative;
  min-height: 100vh;
  padding-bottom: 160rpx;
  background: #0a0a0a;
}

.banner-section {
  position: relative;
}

.banner-wrapper {
  position: relative;
  width: 100%;
  height: 640rpx;
}

.banner-no-radius {
  border-radius: 0 !important;
  overflow: hidden;

  :deep(.cl-banner__item) {
    border-radius: 0 !important;
  }

  :deep(image) {
    border-radius: 0 !important;
  }
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 10;
}

.banner-overlay__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  pointer-events: auto;
}

.banner-overlay__menu {
  width: 80rpx;
}

.banner-overlay__category {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32rpx;
}

.banner-overlay__category-main {
  font-size: 40rpx;
  font-weight: 500;
  letter-spacing: 4rpx;
  color: #fff;
}

.banner-overlay__category-sub {
  font-size: 24rpx;
  font-weight: 400;
  letter-spacing: 2rpx;
  color: rgba(255, 255, 255, 0.85);
}

.studio-intro {
  background: #1a1a1a;
  padding: 56rpx 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.studio-intro__title {
  font-size: 40rpx;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.studio-intro__subtitle {
  font-size: 24rpx;
  letter-spacing: 3rpx;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12rpx;
}

.studio-intro__desc {
  font-size: 28rpx;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.section {
  padding: 56rpx 0;
  background: #0a0a0a;
}

.section--featured {
  background: #1a1a1a;
  padding: 56rpx 32rpx;
}

.section--team {
  background: #0a0a0a;
  padding: 56rpx 32rpx;
}

.section--location {
  background: #1a1a1a;
  padding: 56rpx 32rpx 80rpx;
}

.section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.section__title {
  font-size: 40rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 2rpx;
}

.section__more {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1rpx;
}

.featured-list {
  display: flex;
  flex-direction: column;
  gap: 48rpx;
}

.featured-item {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.featured-item__image {
  width: 100%;
  height: 480rpx;
  display: block;
}

.featured-item__info {
  padding: 32rpx 0;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.featured-item__title {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1rpx;
}

.featured-item__subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.empty-tip {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 80rpx 0;
}

.team-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.team-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.team-item:last-child {
  border-bottom: none;
}

.team-item__avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.team-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.team-item__name {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1rpx;
}

.team-item__speciality {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.team-item__experience {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.location-card {
  overflow: hidden;
}

.location-card__image {
  width: 100%;
  height: 400rpx;
  display: block;
}

.location-card__info {
  padding: 32rpx 0;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.location-card__name {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1rpx;
}

.location-card__address,
.location-card__hours {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.contact-fab {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #4286f3, #6ba4ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8rpx 20rpx rgba(66, 134, 243, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:active {
    transform: scale(0.92);
    box-shadow: 0 4rpx 12rpx rgba(66, 134, 243, 0.5);
  }
}

.contact-fab__text {
  margin-top: 4rpx;
  font-size: 20rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;
}

.contact-popup {
  padding: 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);

  &__header {
    padding: 32rpx 32rpx 24rpx;
    text-align: center;
    background: linear-gradient(135deg, #4286f3 0%, #6ba4ff 100%);
    color: #fff;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -15%;
      width: 200rpx;
      height: 200rpx;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -20%;
      left: -10%;
      width: 150rpx;
      height: 150rpx;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 50%;
    }
  }

  &__title {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6rpx;
    letter-spacing: 1rpx;
    position: relative;
    z-index: 1;
  }

  &__subtitle {
    display: block;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5rpx;
    position: relative;
    z-index: 1;
  }

  &__content {
    padding: 32rpx 24rpx;
  }

  &__safe-area {
    height: calc(env(safe-area-inset-bottom) + 100rpx);
    min-height: 100rpx;
  }
}

.contact-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &:last-child {
    margin-bottom: 0;
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  }

  &__icon {
    width: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(66, 134, 243, 0.1) 0%, rgba(107, 164, 255, 0.1) 100%);
    border-radius: 50%;
    margin-right: 24rpx;
    flex-shrink: 0;
  }

  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    min-width: 0;
  }

  &__label {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5rpx;
  }

  &__value {
    font-size: 26rpx;
    color: #666;
    word-break: break-all;
  }

  &__action {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
}

/* 优化联系工作室弹窗样式 */
:deep(.contact-popup-wrapper) {
  z-index: 9999 !important;
}

/* 优化回到顶部按钮样式 */
:deep(.cl-back-top-wrapper) {
  right: 0 !important;
  bottom: 240rpx !important;
  z-index: 99 !important;
  overflow: visible !important;
}

:deep(.cl-back-top) {
  width: 96rpx !important;
  height: 96rpx !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20rpx) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(160rpx) !important;
  opacity: 0 !important;
  pointer-events: none !important;

  &.is-show {
    transform: translateX(-32rpx) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  &:active {
    transform: translateX(-32rpx) scale(0.92) !important;
    background: rgba(0, 0, 0, 0.8) !important;
  }
}
</style>
